import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Tooltip } from 'ant-design-vue'
import type { TooltipPlacement } from 'ant-design-vue/es/tooltip'
import type Icon from '@ant-design/icons-vue'

@Component
export class ToolTipText extends Render {
    @Prop() text!: string
    @Prop() content!: string
    @Prop({ default: 'bottom' }) placement?: TooltipPlacement
    @Prop() prefixIcon?: typeof Icon
    @Prop() suffixIcon?: typeof Icon
    @Prop({ default: true }) underline?: boolean
    @Prop({ default: 'left' }) textAlign?: string
    @Prop({ default: false }) link?: boolean

    render() {
        return (
            <Tooltip placement={this.placement} v-slots={{
                title: () => {
                    return <div v-html={this.content}>{this.content}</div>
                },
                default: () => {
                    return <div class={`flex items-center text-gray-light-600 cursor-pointer ${this.textAlign==='center' ? 'justify-center' : 'justify-start'}`}>
                        {this.prefixIcon && <>{this.prefixIcon}</>}
                        <span class={`${this.underline ? 'underline underline-offset-4px' : ''} ${this.link ? '!text-blue-100': ''}`}>{this.text}</span>
                        {this.suffixIcon && <>{this.suffixIcon}</>}
                    </div>
                }
            }}>

            </Tooltip>
        )
    }
}

export default toNative<
    {
        text: string
        content: string
        placement?: TooltipPlacement
        prefixIcon?: typeof Icon
        suffixIcon?: typeof Icon
        underline?: boolean
        textAlign?: string
        link?: boolean
    },
    {}
>(ToolTipText)
